<template>
  <div>
    <div>
      <el-steps active="2" finish-status="success" simple style="margin-top: 20px">
        <el-step title="填写课程信息" icon="el-icon-edit"></el-step>
        <el-step title="上传课程内容" icon="el-icon-upload"></el-step>
        <el-step title="提交审核" icon="el-icon-coffee-cup"></el-step>
      </el-steps>
    </div>
    <div>
      <!--展示页面-->
      <el-table :data="tableData" @cell-dblclick="handle" style="width: 100%"
                :row-class-name="tableRowClassName">
        <el-table-column
          type="index" label="章节" width="300%">
        </el-table-column>

        <el-table-column prop="kname" label="章节名字">
          <template slot-scope="scope">


            <div v-if="scope.row.isEdit">
              <el-input v-model="scope.row.kname"></el-input>
            </div>
            <div v-else>{{ scope.row.kname}}</div>

          </template>
        </el-table-column>
        <el-table-column label="按钮">

          <!--新增按钮-->
          <template slot="header" slot-scope="scope">
            <el-button type="danger" icon="el-icon-circle-plus-outline" @click="handleAdd" circle></el-button>
          </template>

          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleClick(scope.row)">{{
                scope.row.isEdit ? '保存' : '编辑'
              }}
            </el-button>
            <el-button size="mini" type="text">
              <router-link :to="{path: '/classHour',query:{zid:scope.row.zid}}">课时管理</router-link>
            </el-button>
            <el-button type="text"
                       @click.native.prevent="deleteRow(scope.$index, tableData)"
                       size="small">
              移除
            </el-button>

          </template>
        </el-table-column>
      </el-table>

      <el-row>
        <el-col :span="24">
          <el-button type="danger" @click="onSubmit">提交审核</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "ChapterManager",
  data() {
    return {
      form: [{
        chapter: "",
        numm: 1,
      }],
      tableData: [],
      tochange: true,
      kid:''
    }
  },
  methods: {
    onSubmit() {
      this.$router.push({
        path:"/check"
      });
      console.log('submit!');
    },
    handleClick(row) {
      // 动态设置数据并通过这个数据判断显示方式
      if (row.isEdit) {
        //确定代表修改还是保存如果没有zid就代表是新增，有会根据zid去修改
            if (row.zid ==''  ) {
              if (row.kname != '') {
                // 代表是新增
                //alert("添加章节");
                this.$axios.post("course-person/aaa/chapter/addchapter/"+this.kid+"/"+row.kname).then(r=>{
                      row.zid=r.data.obj;
                  this.$delete(row, 'isEdit'); //课程添加成功才能删除这个isEdit
                  this.querryall();
                });
              }else {
                    this.$message('需要填写章节名称!!');
              }

        }else {
          //修改章节
          //alert("修改章节");
          if (row.kname != '') {
            //改的不为空就让他修改
            this.$axios.post("course-person/aaa/chapter/updatechapter/"+row.zid+"/"+row.kname).then(r=>{
              if (r.data.obj == 1) {
                //代表修改成功
                this.$delete(row, 'isEdit'); //课程修改成功才能删除这个isEdit
                this.querryall();
              }else {
                this.$message('修改失败!!');
              }

            });
          }else {
            this.$message('章节名称不能为空！！');
          }

        }

      } else {
        this.$set(row, 'isEdit', true);
      }

      console.log(row.index);
      console.log(this.tableData)
    },
    handleAdd() {
      this.tableData.push({
        zid:'',
        kname:'',
        isEdit:true
      });
    },
    handle(row, column, cell, event) {
    },
    tableRowClassName({row, rowIndex}) {
      // 把每一行的索引放进row
      row.index = rowIndex;
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    querryall(){
      this.$axios.post("course-person/aaa/chapter/findallbykid/"+this.kid).then(r=>{
        //alert(JSON.stringify(r.data.obj));
        this.tableData=r.data.obj;
      })
    }

  },
  mounted(){
    //alert(this.$route.query.kid);
    this.kid=this.$route.query.kid;
    //alert(this.kid)
    //根据课程去查找它的对应章节
    this.$axios.post("course-person/aaa/chapter/findallbykid/"+this.kid).then(r=>{
     // alert(JSON.stringify(r.data.obj));
      this.tableData=r.data.obj;
    })
    //
  }
}
</script>

<style scoped>
>>> .el-input {
  width: 100%;
}

</style>
